<template>
  <div class="page-container">
    <!-- 作业提交区域 -->
    <el-card class="submit-card" header="作业提交">
      <div class="upload-desc">请上传您的作业文件，AI 将为您提供评价和建议</div>
      <!-- 上传组件 -->
      <el-upload
        class="upload-area"
        drag
        :accept="'.pdf,.doc,.docx,.txt'"
        :on-change="handleFileChange"
        :file-list="fileList"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">拖拽文件到此处或 <em>点击上传</em></div>
        <div class="el-upload__hint">支持.pdf,.doc,.docx,.txt 格式</div>
      </el-upload>
      <div class="button-group">
        <!-- 下载漏洞按钮：使用从MyVulnerability传递的task_url下载题目文件 -->
        <el-button @click="downloadVulnerability">下载漏洞</el-button>
        <!-- 返回按钮：在两个按钮中间添加，点击返回MyVulnerability页面 -->
        <el-button @click="goBack">返回查看本人漏洞任务</el-button>
        <!-- 提交作业按钮 -->
        <el-button type="primary" @click="submitHomework" :disabled="!selectedFile">
          提交作业
        </el-button>
      </div>
    </el-card>

    <!-- AI 评价助手区域 -->
    <el-card class="ai-card" header="AI评价助手">
      <div class="ai-desc">基于标准作业进行智能评价</div>
      <el-dialog
        title="报告详情"
        v-model="dialogVisible"
        width="70%"
        :before-close="handleClose"
      >
        <div class="report-detail">
          <!-- 这里可根据实际需求渲染报告内容，示例仅为占位 -->
          <p>模拟报告详情内容...</p>
          <p>作业评价：...</p>
          <p>改进建议：...</p>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
      <div class="ai-chat">
        <p>用户您好！我是 AI 评价助手，请上传您的作业文件，我将根据标准作业为您提供专业评价和建议。</p>
      </div>
      <el-button
        type="primary"
        class="view-report-btn"
        @click="dialogVisible = true"
      >
        查看报告详情
      </el-button>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 导入路由工具，用于页面跳转和获取URL参数
import { useRouter, useRoute } from 'vue-router'
import { ElUpload, ElCard, ElButton, ElDialog } from 'element-plus'

// 初始化路由实例
const router = useRouter()
// 获取当前路由信息，用于获取传递的参数
const route = useRoute()

// 从URL参数中获取taskId和taskUrl
// taskId用于标识任务，taskUrl用于下载题目文件
const taskId = Number(route.query.taskId)
// 接收从MyVulnerability传递的题目文件下载地址
const taskUrl = route.query.taskUrl

const fileList = ref([])
const selectedFile = ref(null)
const dialogVisible = ref(false)

// 文件改变时回调
const handleFileChange = (uploadFile) => {
  selectedFile.value = uploadFile.raw // 保存原始文件对象，按需使用
  fileList.value = [uploadFile] // 展示已选文件
}

// 提交作业逻辑（可扩展，比如调用接口上传文件等）
const submitHomework = () => {
  if (selectedFile.value) {
    console.log('提交的文件：', selectedFile.value)
    // 这里可补充实际提交逻辑，如发送文件到后端
  }
}

// 下载漏洞文件方法：使用从MyVulnerability传递的taskUrl下载对应任务的题目文件
// 替代原通过taskId动态构建URL的方式，直接使用前端已有的文件路径
const downloadVulnerability = () => {
  // 验证taskUrl是否存在，避免无效请求
  if (!taskUrl) {
    console.error('题目文件地址不存在，无法下载')
    return
  }

  // 使用时间戳作为参数，避免浏览器缓存旧文件
  const timestamp = new Date().getTime()
  // 直接使用传递过来的taskUrl进行下载
  window.open(`${taskUrl}?timestamp=${timestamp}`, '_blank')
}

// 返回上一页方法
// 使用router.go(-1)返回到跳转前的页面，保持导航历史连贯性
const goBack = () => {
  router.go(-1)
}

// 关闭弹窗回调
const handleClose = (done) => {
  done()
}
</script>

<style scoped>
.page-container {
  display: flex;
  gap: 20px;
  padding: 20px;
}
.submit-card,
.ai-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.upload-desc {
  margin-bottom: 16px;
  color: #666;
}
.upload-area {
  text-align: center;
  margin-bottom: 16px;
}
.button-group {
  display: flex;
  gap: 10px; /* 保持按钮间10px间距 */
  justify-content: flex-start; /* 左对齐排列三个按钮 */
}
.ai-desc {
  margin-bottom: 16px;
  color: #666;
}
.ai-chat {
  margin-bottom: 16px;
}
.view-report-btn {
  align-self: flex-start;
}
.report-detail {
  white-space: pre-line;
}
</style>